<template>
    <div>
        <el-dialog :title="isAdd ? '添加商品' : '编辑商品'" :visible.sync="isShow"  @opened="createEdit" :before-close="cancel" center>
            <el-form :model="goodsForm" :rules="rules" ref="goodsRef">
                <el-form-item label="一级分类" :label-width="formLabelWidth" prop="first_cateid">
                    <el-select v-model="goodsForm.first_cateid" placeholder="请选择一级分类" @change="change(false)">
                        <el-option v-for="item in getCate" :label="item.catename" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth" prop="second_cateid">
                    <el-select v-model="goodsForm.second_cateid" placeholder="请选择二级分类">
                        <el-option v-for="item in cate_List" :label="item.catename" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goodsname">
                    <el-input v-model="goodsForm.goodsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="goodsForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="市场价格" :label-width="formLabelWidth" prop="market_price">
                    <el-input v-model="goodsForm.market_price" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 图片上传 -->
                <el-form-item label="图片" :label-width="formLabelWidth">
                    <el-upload action="#" list-type="picture-card" :on-preview="handlePictureCardPreview" :limit="1"
                        :auto-upload="false" :on-change="changePhoto" :file-list="fileList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="商品规格" :label-width="formLabelWidth" prop="specsid">
                    <el-select v-model="goodsForm.specsid" placeholder="请选择商品规格" @change="changeSpecs">
                        <el-option v-for="item in getSpecs" :label="item.specsname" :value="item.id"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品属性" :label-width="formLabelWidth" prop="specsattr">
                    <el-select v-model="goodsForm.specsattr" placeholder="请选择商品属性" :multiple="true">
                        <el-option v-for="item in specsArr" :label="item" :key="item" :value="item"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="是否新品" :label-width="formLabelWidth">
                    <el-radio v-model="goodsForm.isnew" :label="1">是</el-radio>
                    <el-radio v-model="goodsForm.isnew" :label="2">否</el-radio>
                </el-form-item>
                <el-form-item label="是否热卖" :label-width="formLabelWidth">
                    <el-radio v-model="goodsForm.ishot" :label="1">是</el-radio>
                    <el-radio v-model="goodsForm.ishot" :label="2">否</el-radio>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="goodsForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
                <!-- 富文本编辑器 -->
                <el-form-item label="商品描述" :label-width="formLabelWidth">
                    <div id="edit"></div>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
/* 
    富文本编辑器
    商品管理模块使用的富文本编辑器  叫wangeditor
    下载命令:npm i wangeditor
    基本使用:
    1.引入富文本编辑器模块  
    import E from 'wangeditor';
    2.使用  创建界面  (富文本编辑器是一个构造函数  需要使用new关键字创建)
    new E('dom节点');
    new E('dom节点').create();
    初始化
    new E('dom节点').txt.html('要赋值的内容');
    取值
    new E('dom节点').txt.html();
    销毁富文本
    new E('dom节点').destroy();

*/
import { mapGetters, mapActions } from 'vuex';
import { goodsAdd, goodsInfo, goodsEdit } from '../../request/api';
// 引入富文本编辑器模块
import E from 'wangeditor';
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            fileList: [],//图片回显
            dialogImageUrl: '',//预览时图片的地址
            dialogVisible: false,//预览弹窗的状态值
            goodsForm: {
                first_cateid: '',//一级分类编号
                second_cateid: '',//二级分类编号
                goodsname: '',//商品名称
                price: '',//商品价格
                market_price: '',//市场价格
                img: '',//商品图片（文件）
                description: '',//商品描述
                specsid: '',//商品规格编号
                specsattr: '',//商品规格属性
                isnew: 1,//是否新品     1-是 2-否
                ishot: 1,//是否热卖推荐 1-是 2-否
                status: 1,//状态1正常2禁用
            },
            formLabelWidth: '120px',
            rules: {
                goodsname: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                first_cateid: [
                    { required: true, message: '请选择一级分类', trigger: 'change' }
                ],
                second_cateid: [
                    { required: true, message: '请选择二级分类', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                market_price: [
                    { required: true, message: '请输入市场价格', trigger: 'blur' },
                ],
                specsid: [
                    { required: true, message: '请选择商品规格', trigger: 'change' },

                ],
                specsattr: [
                    { required: true, message: '请选择商品属性', trigger: 'blur' },

                ],
            },
            cate_List: [],//二级分类列表
            specsArr: [],//商品属性分类,
            edit: '',//富文本编辑器
        }
    },
    methods: {
        // 创建富文本编辑器
        createEdit() {
            // 组件一加载就创建富文本编辑器
            this.edit = new E('#edit');
            // 创建富文本编辑器
            this.edit.create();
            // 赋值内容
            this.edit.txt.html(this.goodsForm.description);
            console.log(this.goodsForm.description, '富文本');
        },
        ...mapActions({
            cateList: 'cate/getCatelistAction',
            specsList: 'specs/getSpecsList',
            goodsList: 'goods/goodsListAction',
            goodsCount: 'goods/goodsCountActions'
        }),
        // 当图片发生改变时
        changePhoto(file, fileList) {
            // console.log(file, fileList);
            // 将图片赋值给表单
            this.goodsForm.img = file.raw;
            // console.log(this.goodsForm.img);
        },
        // 预览图片
        handlePictureCardPreview(file) {
            // console.log(file);
            // 将图片的临时路径赋值给预览
            this.dialogImageUrl = file.url;
            // 弹出预览弹窗
            this.dialogVisible = true;
        },
        // 关闭弹窗
        cancel() {
            this.$emit('cancel');
            // 清空表单
            this.reset();
            // 清空规则验证
            this.resetForm();
            // 清空图片
            this.fileList = [];
            //销毁富文本编辑器
            this.edit.destroy()
        },
        // 清空表单
        reset() {
            this.goodsForm = {
                first_cateid: '',//一级分类编号
                second_cateid: '',//二级分类编号
                goodsname: '',//商品名称
                price: '',//商品价格
                market_price: '',//市场价格
                img: '',//商品图片（文件）
                description: '',//商品描述
                specsid: '',//商品规格编号
                specsattr: '',//商品规格属性
                isnew: 1,//是否新品     1-是 2-否
                ishot: 1,//是否热卖推荐 1-是 2-否
                status: 1,//状态1正常2禁用
            }

        },
        // 清空变淡的规则验证
        resetForm() {
            this.$refs.goodsRef.resetFields();
        },
        // 数据回显
        lookup(id) {
            console.log(id, '数据回显');
            // 根据id查询要回显的数据
            goodsInfo({ id }).then(res => {
                if (res.code == 200) {
                    console.log(id, 'id');
                    // 获取成功
                    this.$message.success(res.msg);
                    // console.log(res);
                    this.goodsForm = res.list;
                    // 处理属性的数据格式  将字符串转成数组
                    this.goodsForm.specsattr = this.goodsForm.specsattr.split(',');
                    // 处理图片
                    this.fileList = this.goodsForm.img ? [{ url: this.goodsForm.img }] : [];
                    // 处理二级分类id
                    this.goodsForm.id = id;
                    // 重新触发change事件事件  目的是为了实现二级联动
                    this.change(true);
                    this.changeSpecs(true);
                    // console.log(this.goodsForm);
                    // 重新赋值富文本
                    this.edit.txt.html(this.goodsForm.description);
                } else {
                    // 获取失败
                    this.$message.error(res.msg);
                }
            })
            // this.goodsForm
        },
        add() {
            this.$refs.goodsRef.validate(val => {
                // 通过验证
                if (val) {
                    // 获取富文本的内容
                    this.goodsForm.description = this.edit.txt.html();
                    if (this.isAdd) {
                        // 添加
                        goodsAdd(this.goodsForm).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                // 添加成功
                                // 提示信息
                                this.$message.success(res.msg);
                                // 关闭弹窗
                                this.cancel();
                                // 重新渲染视图
                                this.goodsList();
                                // 重新计算总页
                                this.goodsCount();
                            }
                        })
                    } else {
                        // 修改
                        goodsEdit(this.goodsForm).then(res => {
                            if (res.code == 200) {
                                // 修改成功
                                this.$message.success(res.msg);
                                // 关闭弹窗
                                this.cancel();
                                // 重新传染视图
                                this.goodsList();
                            } else {
                                // 修改失败
                                this.$message.error(res.msg);
                            }
                        })
                    }
                }
            })
        },
        // 更改一级分类  获取二级分类列表
        change(tag) {
            // console.log(tag);
            /* 
                思路:知道当前用户选中的一级分类id 根据一级分类id在数组中进行查找 可以那到下标  根据下标获取当前选中的一级分类下的children
            */
            // 根据一级分类id进行查找
            let index = this.getCate.findIndex(item => {
                return item.id === this.goodsForm.first_cateid
            })
            // 获取一级分类下的children
            this.cate_List = this.getCate[index].children
            // 如果是添加  才会置空
            if (!tag) {
                // 置空二级分类
                this.goodsForm.second_cateid = ''
            }

        },
        // 根据商品规格的id 获取商品属性
        changeSpecs(tag) {
            // console.log(this.getSpecs);
            let index = this.getSpecs.findIndex(item => {
                // console.log(item);
                return item.id == this.goodsForm.specsid
            })
            // 如果是编辑  才会渲染属性值  否则置空
            if (tag) {
                // 商品属性值
                this.specsArr = this.getSpecs[index].attrs;
                // console.log(this.specsArr);
            }

        }
    },
    mounted() {
        this.cateList();
        // 优化  如果点击过商品规格就不重新请求 没有点击过商品规格就重新请求
        if (this.getSpecs.length == 0) {
            this.specsList();
        }
        // this.createEdit();
    },
    watch: {},
    computed: {
        ...mapGetters({
            getCate: 'cate/getCateList',
            getSpecs: 'specs/specs_list',
            getGoods: 'goods/getGoodsList'
        })
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>
